<script setup>
import { ref } from 'vue'
// 任务列表
const taskList = ref([
  { 
    id: 1,
    user_id: 28,
    classify_id: 1,
    title: '开会',
    isFinished: false,
    finish_date: '2025-2-14',
    created_date: '2025-2-14',
  },
  {
    id: 2,
    user_id: 28,
    classify_id: 1,
    title: '听课',
    isFinished: false,
    finish_date: '2025-2-15',
    created_date: '2025-2-15',
  },
  {
    id: 3,
    user_id: 28,
    classify_id: 1,
    title: '讲座',
    isFinished: false,
    finish_date: '2025-2-16',
    created_date: '2025-2-16',
  },
  { 
    id: 4,
    user_id: 28,
    classify_id: 1,
    title: '写报告',
    isFinished: true,
    finish_date: '2025-2-14',
    created_date: '2025-2-14',
  },
  {
    id: 5,
    user_id: 28,
    classify_id: 1,
    title: '吃饭',
    isFinished: true,
    finish_date: '2025-2-15',
    created_date: '2025-2-15',
  },
  {
    id: 6,
    user_id: 28,
    classify_id: 1,
    title: '玩',
    isFinished: true,
    finish_date: '2025-2-16',
    created_date: '2025-2-16',
  },
])
// 未完成任务数量
const toFinishCount = ref(() => {
  return taskList.value.filter(item => !item.isFinished).length
})
// 已完成任务数量
const finishedCount = ref(() => {
  return taskList.value.filter(item => item.isFinished).length
})
</script>

<template>
  <div class="task-container">
    <div v-for="(item, index) in taskList" :key="item.id" class="todo-card">
      <!-- 代办序号 -->
      <div class="number">{{ index + 1 }}</div>
      <!-- 编辑区域 -->
      <div class="edit-block">
        <h3 class="title">{{ item.title}}</h3>
        <div class="classify">分类：{{ item.classify_id }}</div>
        <div class="finish-date">
          <span class="iconfont">&#xe61f;</span>
          <span>{{ item.finish_date }}</span>
        </div>
      </div>
      <!-- 图标区域 -->
      <div class="icon-box">
        <div class="icon-yes">
          <div class="iconfont">&#xe613;</div>
        </div>
        <div class="icon-other">
          <div class="iconfont">&#xe80f;</div>
          <div class="iconfont">&#xe609;</div>
          <div class="iconfont">&#xe630;</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.task-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  .todo-card {
    width: 13rem;
    height: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 2rem 2rem 0;
    padding: 1rem;
    background-color: rgba(94, 177, 229, 0.6);
    border-radius: 1.5rem;

    .number {
      font-family: "round";
      font-size: 1.3rem;
      font-weight: 600;
    }

    .edit-block {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 1.25rem;
        margin-bottom: 0.3rem;
      }

      .classify {
        font-size: 0.8rem;
        color: #575757;
        border-bottom: 0.15rem solid #575757;
      }
      
      .finish-date {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.8rem;
        color: #575757;
      }
    }

    .icon-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .icon-other {
        display: flex;
        gap: 0.5rem;
      }

      .iconfont {
        width: 1.85rem;
        height: 1.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #fff
      }
    }
  }
}
</style>

